<template>
  <div class="topo-properties">
    <div class="topo-properties-nav">
      <!-- <q-select v-model="curComponent" :options="componentOptions" @input="changeComponent" style="margin-right:0px;height:43px;border:none;" /> -->
      <template v-if="isLayer">
        <q-input v-model="topoData.name" />
      </template>
      <template v-if="configObject != null && isLayer == false">
        <q-input v-model="configObject.name" />
      </template>
      <template v-if="selectedComponents.length>1">
        <q-input value="批量设置" readonly />
      </template>
    </div>
    <template v-if="configObject != null && isLayer == false">
      <div class="topo-properties-tabs">
        <div
          class="topo-properties-tab"
          @click="changeTab(0)"
          :class="{'topo-properties-tab-active': tabIndex == 0}"
        >样式</div>
        <div
          class="topo-properties-tab"
          @click="changeTab(1)"
          :class="{'topo-properties-tab-active': tabIndex == 1}"
        >动画</div>
        <div
          class="topo-properties-tab"
          @click="changeTab(2)"
          :class="{'topo-properties-tab-active': tabIndex == 2}"
        >事件</div>
      </div>
      <div class="topo-properties-table">
        <div v-show="tabIndex == 0">
          <style-panel :configObject="configObject"></style-panel>
        </div>
        <div v-show="tabIndex == 1">
          <data-panel :configObject="configObject"></data-panel>
        </div>
        <div v-show="tabIndex == 2">
          <action-panel :configObject="configObject"></action-panel>
        </div>
      </div>
    </template>
    <template v-if="isLayer">
      <layer-panel></layer-panel>
    </template>
    <template v-if="selectedComponents.length>1&& isLayer == false">
      <div class="topo-properties-table">
        <batch-panel :configObject="batchObject"></batch-panel>
      </div>
      <div class="bottom-btn">
        <q-btn color="primary" size="sm" label="批量修改" @click="batchEdit" />
      </div>
    </template>
  </div>
</template>

<script>

import { mapActions, mapGetters, mapState, mapMutations } from 'vuex'
import DataPanel from './panel/DataPanel';
import StylePanel from './panel/StylePanel';
import ActionPanel from './panel/ActionPanel';
import LayerPanel from './panel/LayerPanel';
import BatchPanel from './panel/BatchPanel';
import { deepCopy } from '@/assets/libs/utils.js';

export default {
  name: 'TopoProperties',
  components: {
    DataPanel,
    StylePanel,
    ActionPanel,
    LayerPanel,
    BatchPanel
  },
  data () {
    return {
      tabIndex: 0
    }
  },
  computed: {
    ...mapState({
      topoData: state => state.topoEditor.topoData,
      selectedComponents: state => state.topoEditor.selectedComponents,
      selectedComponentMap: state => state.topoEditor.selectedComponentMap,
      isLayer: state => state.topoEditor.selectedIsLayer,
      configObject: state => state.topoEditor.selectedComponent
    }),
    // 批量修改对象
    batchObject () {
      let res = {
        style: { position: {} }
      };
      if (this.selectedComponents.length > 1) {
        res = deepCopy(this.selectedComponentMap[this.selectedComponents[0]]);
        res.style.text = '';
      }
      return res;
    }
  },
  methods: {
    ...mapMutations('topoEditor', [
      'setTopoData'
    ]),
    initPage (configData) {
      this.configData = configData;
    },
    changeTab (tabIndex) {
      this.tabIndex = tabIndex;
    },
    bindData (configObject, index, isLayer) {
      this.configObject = configObject;
      this.isLayer = isLayer;
      if (isLayer === false) {

      }
    },
    //批量修改
    batchEdit () {
      for (var key in this.selectedComponentMap) {
        var n = this.selectedComponentMap[key];
        let style = this.batchObject.style;
        let arrs = ['x', 'y']; //不拷贝的属性
        for (let k in style.position) {
          let val = style.position[k];
          if (!arrs.includes(k) && val) {
            n.style.position[k] = val;
          }
        }
        for (let k in style) {
          let val = style[k];
          if (k != 'position' && val) {
            n.style[k] = val;
          }
        }
        // debugger;
        if (this.batchObject.code) {
          n.code = this.batchObject.code;
        }
      }
    }
  },
  mounted () {

  }
}
</script>

<style lang="scss">
.topo-properties {
  .head-tb {
    tr {
      line-height: 30px;
    }
    tr > td {
      padding: 5px 0px;
      background-color: #eee;
    }
  }
  .data-tb {
    tr {
      td {
        width: 50%;
      }
    }
  }
  border: #ccc solid 1px;
  background-color: white;
  height: 100%;

  .topo-properties-tabs {
    height: 35px;
    display: flex;
    border-bottom: #ccc solid 1px;
    background-color: white;

    .topo-properties-tab {
      height: 35px;
      text-align: center;
      line-height: 35px;
      flex: 1;
      color: #666;
    }

    .topo-properties-tab + .topo-properties-tab {
      border-left: #ccc solid 1px;
    }

    .topo-properties-tab:hover {
      cursor: pointer;
    }

    .topo-properties-tab-active {
      color: #000;
      border-bottom: #3388ff solid 2px;
      font-weight: bold;
    }
  }

  .topo-properties-table {
    overflow-x: hidden;
    overflow-y: auto;
    height: calc(100% - 92px);

    table {
      width: 100%;
      border-collapse: collapse;

      td {
        text-align: center;
        padding: 0px;
        border: #ccc solid 1px;
      }

      .q-input {
        border: none;
      }

      .q-select {
        border: none;
        margin-right: 0px;
      }
    }
  }

  .not-surpport {
    margin: 20px auto;
    text-align: center;
  }
  .bottom-btn {
    text-align: center;
  }
}
</style>
